<template>
  <div class="static-page">
    <section class="hero">
      <h1>购物帮助</h1>
      <p>常见问题与使用指南，帮你快速上手</p>
    </section>
    <section class="content">
      <div class="grid">
        <div class="card">
          <h3>下单与支付</h3>
          <ul>
            <li>支持支付宝、微信、银联等方式</li>
            <li>订单提交后可在“我的订单”查看状态</li>
            <li>如支付失败，稍后重试或更换支付方式</li>
          </ul>
        </div>
        <div class="card">
          <h3>配送与发货</h3>
          <ul>
            <li>48小时内发货（节假日顺延）</li>
            <li>发货后可在订单详情查看物流信息</li>
            <li>偏远地区时效可能受限，敬请谅解</li>
          </ul>
        </div>
        <div class="card">
          <h3>退换与售后</h3>
          <ul>
            <li>7天无理由退换（保持商品完好）</li>
            <li>质量问题支持免费换新</li>
            <li>详情参见“退换货政策”和“售后服务”</li>
          </ul>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.static-page .hero {
  padding: 40px 20px;
  text-align: center;
  background: linear-gradient(135deg, #f6f9ff, #eef5ff);
}
.static-page .hero h1 {
  margin: 0 0 8px;
  font-size: 28px;
  color: #1f2d3d;
}
.static-page .hero p {
  margin: 0;
  color: #666;
}
.static-page .content {
  max-width: 1000px;
  margin: 20px auto 40px;
  padding: 0 20px;
}
.static-page .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.static-page .card {
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  padding: 20px;
}
ul {
  padding-left: 18px;
}
</style>
